<template>
    <div class="compact-picker">
        <div class="dropdown">
            <div v-if="currentColor" class="item" :style="{background: currentColor}" data-toggle="dropdown"></div>
            <button class="btn btn-info btn-xs" v-else data-toggle="dropdown">Choose</button>
            <ul class="dropdown-menu animated fadeIn">
                <li  :key="'color' + index" class="item" v-for="(color, index) in colors" :style="{background: color}" @click="selectColor(color)"></li>
                <li class="btn btn-default btn-xs" @click="reset">Reset</li>
            </ul>
        </div>

    </div>
</template>

<script>
    export default {
        name: "CompactPicker",
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        created() {
            this.colors = ['#C2185B', '#7B1FA2', '#512DA8', '#388E3C', '#FFA000', '#5D4037', '#616161', '#607D8B']
            if (this.value) {
                this.currentColor = this.value
            }
        },
        data() {
            return {
                currentColor : '',
            }
        },
        methods: {
            selectColor(color) {
                this.currentColor = color
                this.$emit('input', color)
            },
            reset() {
                this.currentColor = ''
                this.$emit('input', '')
            }
        },
        watch: {
            value() {
                this.currentColor = this.value
            }
        }
    }
</script>

<style scoped  lang="stylus">
    .compact-picker
        display :inline-block;
        vertical-align :middle;
        .clear
            display :inline-block;
        .item
            width :20px;
            height: 20px;
            cursor: pointer;
            display :inline-block;
        ul
            width : 110px;
            min-width : 110px;
            padding-left :10px;
            padding-bottom :0;
            li
                float : left;
                margin-right : 10px;
                margin-bottom : 10px;


</style>